<template>
  <div class="mpd-resize-container" ref="container" :style="resizeStyle">
    <slot></slot>
    <resize-block
      v-for="(item, index) in position"
      :key="'mpd-resize-block-' + index"
      :position="item"
      :target="targetDom"
      :min-width="minWidth"
      :max-width="maxWidth"
      :min-height="minHeight"
      :max-height="maxHeight"
    ></resize-block>
  </div>
</template>

<script>
import './resize-container.less'
import { positionArrays } from './constant'
import ResizeBlock from './ResizeBlock.vue'

export default {
  name: 'ResizeContainer',
  components: {
    ResizeBlock
  },
  props: {
    // 需要展示的伸缩框
    position: {
      type: Array,
      default: () => positionArrays,
      validator: (value) => value.every((item) => positionArrays.includes(item))
    },
    // 父元素中需要改变dom的ref名称
    refName: {
      type: String
    },
    // 宽度
    domWidth: {
      type: [Number, String],
      default: '100%'
    },
    // 最小宽度
    minWidth: {
      type: Number,
      default: 0
    },
    // 最大宽度
    maxWidth: {
      type: Number,
      default: 0
    },
    // 高度
    domHeight: {
      type: [Number, String],
      default: '100%'
    },
    // 最小高度
    minHeight: {
      type: Number,
      default: 0
    },
    // 最大高度
    maxHeight: {
      type: Number,
      default: 0
    }
  },
  data() {
    return {
      // 目标dom
      targetDom: null
    }
  },
  computed: {
    resizeStyle() {
      let data = {
        width: this.domWidth,
        height: this.domHeight
      }
      if (typeof data.width === 'number') {
        data.width += 'px'
      }
      if (typeof data.height === 'number') {
        data.height += 'px'
      }
      return data
    }
  },
  methods: {
    // 初始化
    init() {
      let temp = this.$refs.container
      if (this.refName && this.$parent.$refs[this.refName]) {
        temp = this.$parent.$refs[this.refName]
      }
      this.targetDom = temp
    }
  },
  mounted() {
    this.init()
  }
}
</script>
